<template>
	<div v-bind="$props" v-on="$listeners" style="display: inline;">
		<div v-if="isMobile" style="display: inline;">
			<el-dropdown v-if="listButton.length > mergenumber" trigger="click" @command="handleCommand">
				<button type="button" class="el-button el-button--text el-button--small">
					<span>
						操作<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
				</button>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-for="(item,$index) in listButton" :key="$index" :command="item.innerText"
						:divided="$index>0">
						{{item.innerText}}
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<empty style="display: inline;" v-show="isMobile==false||listButton.length<=mergenumber" ref="childSlot">
			<slot name="default"></slot>
		</empty>
		<!--只有一个按钮就不合并-->
	</div>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "opmerge",
		props: {
			mergenumber: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				children: []
			}
		},
		computed: {
			isMobile() {
				var r = common.tool.handleIsMobile();
				return r;
			},
			listButton() {
				var r = [];
				for (var i = 0; i < this.children.length; i++) {
					var item = this.children[i];
					var json = {
						innerText: item.$el.innerText,
						obj: item,
						type: item.type
					};
					r.push(json);
				}
				return r;
			}
		},
		methods: {
			handleCommand(command) {
				for (var i = 0; i < this.listButton.length; i++) {
					var item = this.listButton[i];
					if (item.innerText == command) {
						item.obj.$emit("click");
						break;
					}
				}
			},
			onlyOne(btn) {
				btn.obj.$emit("click");
			}
		},
		created() {
			window.opmerge = this;
			this.$nextTick(() => {
				var r = this.$refs.childSlot.$children;
				this.children = r;
				if (this.listButton != null && this.listButton.length > 0 && !!this.listButton[0].innerText) {
					this.$emit("initChildren", this.listButton);
				}
				//PC版,自适应宽度
				// var columns = this.$parent.$parent.$children;
				// for (var i = 0; i < columns.length; i++) {
				// 	var item = columns[i];
				// 	if (item.label == "操作") {
				// 		window.item = item;
				// 		try {
				// 			item.width = 180;
				// 		} catch (e) {}

				// 		//item.$props["set width"](170);
				// 		break;
				// 	}
				// }
			});
		}
	}
</script>
